<template>
    <div class="dialog" v-if="form">
        <div class="title">业务系统基本信息</div>
        <div class="wrap1">
            <div>
                <div>系统名称:</div>
                <span>
                    {{ form.projectname }}
                </span>
            </div>
            <div>
                <div>云服务商:</div>
                <span>{{form.supplierName}}</span>
            </div>
            <div>
                <div>上线时间:</div>
                <span>{{ form.onlinetime }}</span>
            </div>
            <div>
                <div>上云区域:</div>
                <span>{{ translatecloudUpArea(form.cloudUpArea) }}</span>
            </div>
            <div>
                <div>业务部门:</div>
                <span>{{ form.officeName }}</span>
            </div>
            <div>
                <div>业主方联系人:</div>
                <span>{{ form.contactsNickName }}</span>
            </div>
            <div>
                <div>联系电话:</div>
                <span>{{ form.contactsinfo }}</span>
            </div>
            <div>
                <div>邮箱:</div>
                <span>{{ form.email }}</span>
            </div>
            <div style="width: 100%">
                <div>承建单位:</div>
                <span>{{ form.constunit }}</span>
            </div>
            <div>
                <div>承建方联系人:</div>
                <span>{{ form.constcts }}</span>
            </div>
            <div>
                <div>联系电话:</div>
                <span>{{ form.constctsinfo }}</span>
            </div>
            <div>
                <div>邮籍:</div>
                <span>{{ form.constemail }}</span>
            </div>
            <!-- <div style="width: 100%">
                <div style="width: auto">系统建设（运维）资金来源:</div>
                <span>{{ form.fundFrom }}</span>
            </div> -->
            <div style="width: 100%">
                <div style="width: auto">自行落实部门上云经费:</div>
                <span>{{ form.fundBySelf ? "是" : "否" }}</span>
            </div>
            <div style="width: 100%">
                <div>项目简介:</div>
                <span>{{ form.introduction }}</span>
            </div>
            <div style="width: 100%">
                <div>申请理由:</div>
                <span>{{ form.remarks }}</span>
            </div>
        </div>
        <div class="title">申请资源</div>
        <!-- <div style="width: 100%">
            <label style="margin-right: 10px">服务商:</label>
            <span>{{ form.cloudSupplier_label }}</span>
        </div> -->
       <div class="wrap">
           <div class="wrap_title">
               <div>服务器</div>
           </div>
           <div style="padding: 20px 20px; width: 100%">
               <el-table
                   :data="form.hosts"
                   style="width: 100%; margin-top: 13px"
               >
                   <el-table-column label="资源类型">
                       <template slot-scope="scope">
                           {{
                               scope.row.flavorType == 1
                                   ? "云服务器"
                                   : scope.row.flavorType == 2
                                   ? "高性能服务器"
                                   : scope.row.serverCode
                                   ? "数据库"
                                   : "存储产品"
                           }}
                       </template>
                   </el-table-column>
                   <el-table-column label="实例名称">
                       <template slot-scope="scope">
                           <span v-if="scope.row.flavorType">{{
                               scope.row.hostName
                           }}</span>
                           <span v-else-if="scope.row.serverCode">{{
                               scope.row.hostInstanceName
                           }}</span>
                           <span
                               v-else-if="!scope.row.hostInstanceNames.length"
                           ></span>
                           <div
                               v-else
                               style="margin-bottom: 6px"
                               v-for="(item, index) in scope.row
                                   .hostInstanceNames"
                               :key="index"
                           >
                               {{ item }}
                           </div>
                       </template>
                   </el-table-column>
                   <el-table-column label="资源详情">
                       <template slot-scope="scope">
                           <div
                               v-if="form.oldform.hosts[scope.$index].flavorType"
                               placement="top-start"
                               width="300"
                               trigger="hover"
                           >
                               <div style="margin-bottom: 6px">
                                   <label>可用域：</label
                                   >{{ form.oldform.hosts[scope.$index].availableDomain_label }}
                               </div>
                               <div style="margin-bottom: 6px" v-if="form.oldform.hosts[scope.$index].flavorType != 1">
                                    <label>资源类型：</label>
                                    {{ form.oldform.hosts[scope.$index].cloudFlavorCode_label }}
                                </div>
                               <div
                                    style="margin-bottom: 6px"
                                    v-if="form.oldform.hosts[scope.$index].flavorType == 1"
                                >
                                    <label>规格：</label
                                    >
                                    {{ form.oldform.hosts[scope.$index].cpuNumber }}核vCPU；{{ form.oldform.hosts[scope.$index].memorySize }}G内存；
                                </div>
                                <div
                                    style="margin-bottom: 6px"
                                    v-if="form.oldform.hosts[scope.$index].flavorType == 2"
                                >
                                    <label>规格：</label
                                    >{{ form.oldform.hosts[scope.$index].cloudFlavorCode_desc }}
                                </div>
                               <div
                                   style="margin-bottom: 6px"
                                   v-if="form.oldform.hosts[scope.$index].flavorType == 1 && form.oldform.hosts[scope.$index].osDisk"
                               >
                                   <label>系统盘：</label
                                   >{{
                                       form.oldform.hosts[scope.$index].osDisk.diskServerCode_label || form.oldform.hosts[scope.$index].osDisk.diskServerName
                                   }}，{{ form.oldform.hosts[scope.$index].osDisk.dataDiskSize }}GB
                               </div>
                               <div
                                   style="margin-bottom: 6px"
                               >
                                   <label>操作系统：</label
                                   >
                                   <!-- {{ form.oldform.hosts[scope.$index].osName }} -->
                                   {{form.oldform.hosts[scope.$index].osName ||osName(form.oldform.hosts[scope.$index].osServerCode)}}
                               </div>
                               <div style="margin-bottom: 6px">
                                   <label>
                                       数据盘(共<span style="color: #e83112">{{
                                           form.oldform.hosts[scope.$index].disks.length
                                       }}</span
                                       >块){{
                                           form.oldform.hosts[scope.$index].disks.length ? ":" : ""
                                       }}</label
                                   >
                               </div>
                               <div
                                   style="margin: 0 0 6px 16px"
                                   v-for="(item, index) in form.oldform.hosts[scope.$index].disks"
                                   :key="index"
                               >
                                   <span>{{ item.diskServerCode_label||item.diskServerName }}</span
                                   >，{{ item.dataDiskSize }}GB
                               </div>
                           </div>
                       </template>
                   </el-table-column>
                   <el-table-column label="变更后">
                       <template slot-scope="scope">
                         <div v-show="!scope.row">已回收</div>
                           <div v-show="!scope.row.insStatus">未变更</div>
                           <div v-show="(scope.row.insStatus?scope.row.insStatus : '')=='REMOVE'">已删除</div>
                           <div  v-show="form.hosts[scope.$index].insStatus=='UPDATE'">
                           <div
                               v-if="scope.row.flavorType"
                               placement="top-start"
                               width="300"
                               trigger="hover"
                           >
                               <div style="margin-bottom: 6px">
                                   <label>可用域：</label
                                   >{{ scope.row.availableDomain_label }}
                               </div>
                               <div style="margin-bottom: 6px" v-if="scope.row.flavorType != 1">
                                    <label>资源类型：</label>
                                    {{ scope.row.cloudFlavorCode_label }}
                                </div>
                               <div
                                   style="margin-bottom: 6px"
                                   v-if="scope.row.flavorType == 1"
                               >
                                   <label>规格：</label
                                   >
                                   <!-- {{ scope.row.cloudFlavorCode_desc }} -->
                                   {{scope.row.cpuNumber}}vCPU； {{scope.row.memorySize}}G内存
                               </div>
                               <div
                                   style="margin-bottom: 6px"
                                   v-if="scope.row.flavorType == 2"
                               >
                                   <label>规格：</label
                                   >
                                   <!-- {{ scope.row.cloudFlavorCode_desc }} -->
                                   {{scope.row.cloudFlavorCode_desc}}
                               </div>
                               <div
                                   style="margin-bottom: 6px"
                                   v-if="scope.row.flavorType == 1 && scope.row.osDisk"
                               >
                                   <label>系统盘：</label
                                   >{{
                                       scope.row.osDisk.diskServerCode_label || ''
                                   }}，{{ scope.row.osDisk.dataDiskSize || 0 }}GB
                               </div>
                               <div
                                   style="margin-bottom: 6px"

                               >
                                   <label>操作系统：</label
                                   >{{ scope.row.osName||osName(scope.row.osServerCode) }}
                               </div>
                               <div style="margin-bottom: 6px">
                                   <label>
                                       数据盘(共<span style="color: #e83112">{{
                                           scope.row.disks.length
                                       }}</span
                                       >块){{
                                           scope.row.disks.length ? ":" : ""
                                       }}</label
                                   >
                               </div>
                               <div
                                   style="margin: 0 0 6px 16px"
                                   v-for="(item, index) in scope.row.disks"
                                   :key="index"
                               >
                                   <span>{{ item.diskServerCode_label || item.diskServerName }}</span
                                   >，{{ item.dataDiskSize }}GB
                               </div>
                           </div>
                           </div>
                       </template>
                   </el-table-column>

               </el-table>
           </div>
       </div>
       <div class="wrap">
           <div class="wrap_title">
               <div>数据库</div>
           </div>
           <div style="padding: 20px 20px; width: 100%">
               <el-table
                   :data="form.databases"
                   style="width: 100%; margin-top: 13px"
               >
                   <el-table-column label="类型">
                       <template slot-scope="scope">
                           <span>{{ scope.row.serverName || scope.row.serverCode_label  }}</span>
                       </template>
                   </el-table-column>
                   <el-table-column label="资源详情">
                       <template slot-scope="scope">
                           <div
                               placement="top-start"
                               width="300"
                               trigger="hover"
                           >
                               <div style="margin-bottom: 6px">
                                   <label>类型：</label
                                   >{{ form.oldform.databases[scope.$index].serverCode_label }}
                               </div>
                               <!-- <div style="margin-bottom: 6px">
                                   <label>版本：</label
                                   >{{ form.oldform.databases[scope.$index].databaseVersion }}
                               </div> -->
                               <div style="margin-bottom: 6px">
                                   <label>位数：</label
                                   >{{ form.oldform.databases[scope.$index].systemDigits }}
                               </div>
                           </div>
                       </template>
                   </el-table-column>
                   <el-table-column label="变更后">
                       <template slot-scope="scope">
                         <div v-show="!scope.row">已回收</div>
                         <div v-show="!scope.row.insStatus">未变更</div>
                         <div v-show="(scope.row.insStatus?scope.row.insStatus : '')=='REMOVE'">已删除</div>
                         <div  v-show="form.databases[scope.$index].insStatus=='UPDATE'">
                           <div
                               placement="top-start"
                               width="300"
                               trigger="hover"
                           >
                               <div style="margin-bottom: 6px">
                                   <label>类型：</label
                                   >{{ scope.row.serverCode || scope.row.serverName }}
                               </div>
                               <!-- <div style="margin-bottom: 6px">
                                   <label>版本：</label
                                   >{{ scope.row.databaseVersion }}
                               </div> -->
                               <div style="margin-bottom: 6px">
                                   <label>位数：</label
                                   >{{ scope.row.systemDigits }}
                               </div>
                           </div>
                           </div>
                       </template>
                   </el-table-column>
               </el-table>
           </div>
       </div>
       <div class="wrap">
           <div class="wrap_title">
               <div>存储产品</div>
           </div>
           <div style="padding: 20px 20px; width: 100%">
               <el-table
                   :data="form.storeProducts"
                   style="width: 100%; margin-top: 13px"
               >
                   <el-table-column label="磁盘类型">
                       <template slot-scope="scope">
                           {{ scope.row.diskServerCode_label }}
                       </template>
                   </el-table-column>
                   <el-table-column label="磁盘用量">
                       <template slot-scope="scope">
                           <span> {{ scope.row.dataDiskSize }}GB </span>
                       </template>
                   </el-table-column>
                   <el-table-column label="资源详情">
                       <template slot-scope="scope">
                           <div
                               placement="top-start"
                               width="300"
                               trigger="hover"
                           >
                              <div style="margin-bottom: 6px">
                                  <label>存储类型：</label
                                  >{{ form.oldform.storeProducts[scope.$index].productCode }}
                              </div>
                              <div style="margin-bottom: 6px">
                                  <label>服务类型：</label
                                  >{{ form.oldform.storeProducts[scope.$index].diskCode }}
                              </div>
                              <div style="margin-bottom: 6px">
                                  <label>磁盘类型：</label
                                  >{{ form.oldform.storeProducts[scope.$index].diskServerName }}
                              </div>
                              <div style="margin-bottom: 6px">
                                  <label>磁盘用量：</label
                                  >{{ form.oldform.storeProducts[scope.$index].dataDiskSize }}GB
                              </div>
                              <div style="margin-bottom: 6px">
                                  <label>服务器：</label>
                                   <div v-for="item in form.oldform.storeProducts[scope.$index].hostIds"> {{gethostName(item)}}</div>
                              </div>
                           </div>
                       </template>
                   </el-table-column>
                   <el-table-column label="变更后">
                       <template slot-scope="scope">
                         <div v-show="!scope.row">已回收</div>
                         <div v-show="!scope.row.insStatus">未变更</div>
                         <div v-show="(scope.row.insStatus?scope.row.insStatus : '')=='REMOVE'">已删除</div>
                         <div  v-show="form.storeProducts[scope.$index].insStatus=='UPDATE'">
                           <div
                               placement="top-start"
                               width="300"
                               trigger="hover"
                           >
                               <div style="margin-bottom: 6px">
                                   <label>存储类型：</label
                                   >{{ scope.row.productCode }}
                               </div>
                               <div style="margin-bottom: 6px">
                                   <label>服务类型：</label
                                   >{{ scope.row.diskCode }}
                               </div>
                               <div style="margin-bottom: 6px">
                                   <label>磁盘类型：</label
                                   >{{ scope.row.diskServerCode_label||scope.row.diskServerName }}
                               </div>
                               <div>
                                   <label>磁盘用量：</label
                                   >{{ scope.row.dataDiskSize }}GB
                               </div>
                               <div style="margin-bottom: 6px">
                                   <label>服务器：</label>
                                    <div v-for="item in  scope.row.hostIds"> {{gethostName(item)}}</div>
                               </div>
                           </div>
                           </div>
                       </template>
                   </el-table-column>
               </el-table>
           </div>
       </div>
       <div class="wrap">
           <div class="wrap_title">
               <div>安全产品</div>
           </div>
           <div style="padding: 20px 20px; width: 100%">
             <el-table
                 :data="[].concat(form.safeProductsList)"
                 style="width: 100%; margin-top: 13px"
             >
             <el-table-column label="序号" width="60px">
               <template slot-scope="scope">
                 {{scope.$index+1}}
               </template>
             </el-table-column>
                 <el-table-column label="产品名称">
                     <template slot-scope="scope">
                         {{ scope.row.productName }}
                     </template>
                 </el-table-column>
                  <el-table-column label="数量">
                     <template slot-scope="scope">
                         {{ scope.row.num }}
                     </template>
                 </el-table-column>
             </el-table>
              <!-- <el-table
                   :data="form.safeProducts"
                   style="width: 100%; margin-top: 13px"
               >
                   <el-table-column label="产品名称">
                       <template slot-scope="scope">
                           {{ scope.row.productName}}
                       </template>
                   </el-table-column>
                   <el-table-column
                       label="变更后"
                       class-name="small-padding fixed-width"
                   >
                       <template slot-scope="scope">
                           <span>{{scope.row.insStatus=='REMOVE'?'已删除':'未变更'}}</span>
                       </template>
                   </el-table-column>
               </el-table> -->
           </div>
       </div>
        <div v-if="false&&otherFlag" class="title" style="margin-top: 30px">其他</div>
        <div v-if="false&&otherFlag" class="wrap2" style="padding-top: 1px">
            <div style="display: flex">
                <span style="font-weight: bold; margin-right: 10px">说明:</span
                >{{ form.remark }}
            </div>
            <div style="font-weight: bold">文件:</div>
                <el-table
                    :data="form.files"
                    style="margin-left:20px;width: 50vw">
                    <el-table-column
                        label="文件名称"
                        >
                        <template slot-scope="scope">
                            {{scope.row.name.substring( 0 ,scope.row.name.lastIndexOf("."))}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="文件类型"
                        >
                        <template slot-scope="scope">
                            {{scope.row.name.substring(scope.row.name.lastIndexOf(".") + 1,scope.row.name.length)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="100"
                            class-name="small-padding fixed-width"
                            v-if="false"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-view"
                                    @click="previewFile(scope.row)"
                                    >预览
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-delete"
                                    @click="DeleteFile(scope.row,scope.$index)"
                                    >删除
                                </el-button>
                            </template>
                        </el-table-column>
                </el-table>
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <div style="max-height: 90vh; overflow-y: scroll">
                <img width="100%" :src="dialogImageUrl" alt="" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getDicts
  } from "@/api/system/dict/data";
export default {
    name: "detail",
    components: {},
    props: {
        configure: {
            type: Object,
            default: {},
        },

        otherFlag: {
            type: Boolean,
            default: true,
        },
        priceFlag: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            base_url: process.env.VUE_APP_BASE_API,
            dialogImageUrl: "",
            dialogVisible: false,
            cloud_up_areaList:[],
            form: null,
        };
    },
    created() {
        getDicts("cloud_up_area").then((response) => {
          this.cloud_up_areaList = response.data;
      });
    },
    methods: {
      gethostName(id){
        let name =''
        this.form.hosts.some(item=>{
          if(item.id==id){
            name=item.hostName
            return true
          }
        })
        return name
      },
        init(data){
            this.form=data
        },
        translatecloudUpArea(data){
            var Name = ''
            this.cloud_up_areaList.forEach(item=>{
                if(item.dictValue == data){
                    Name = item.dictLabel
                }
            })
            return Name
        },
        osName(code){
            let serviceName
            this.configure.czxtList.forEach(item=>{
                if(item.code == code){
                    serviceName = item.serviceName
                }
            })
            return serviceName
        },
        //文件预览
        handlePictureCardPreview(url) {
            this.dialogImageUrl = url;
            this.dialogVisible = true;
        },
    },
};
</script>

<style scoped lang="scss">
.dialog {
    padding-right: 20px;
    font-size: 12px;
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .wrap {
      display: flex;
      background: #faf9ff;
      margin-top: 20px;
      border-radius: 10px;

      .wrap_title {
        padding: 0 10px;
        background: #f4f4f4;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;

        div {
          height: 100%;
          width: 14px;
          font-weight: bold;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }

      .wrap_item {
        display: flex;
        margin-top: 20px;

        div:first-child {
          width: 90px;
          font-weight: bold;
        }

        i {
          line-height: 28px;
          margin-right: 10px;
          font-size: 20px;
          color: #E83112;
        }
      }
    }
    .wrap1 {
        padding: 0 20px 20px 0px;
        background: #faf9ff;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;
        padding-left: 20px;
        overflow-x: hidden;
        min-width:1380px;
        // justify-content: space-between;
        border-radius: 10px;
        div {
            padding-top: 14px;
            width:25%;
            // margin-left: 20px;
            min-width: 340px;
            display: flex;
            border-bottom: 1px solid rgba(192,196,204,0.5);
            div {
                width: 100px;
                min-width: 100px;
                font-weight: bold;
                margin: 0;
                display: flex;
                padding-right: 10px;
                // justify-content: flex-end;
                color: #606266;
                border-bottom: 0px solid rgba(192,196,204,0.5);
            }
            span{
                line-height: 48px;
            }
        }
    }
    .wrap2 {
        padding: 0 20px 20px 20px;
        background: #faf9ff;
        margin-bottom: 30px;
        justify-content: space-between;
        border-radius: 10px;
        div {
            margin-top: 20px;
        }
    }
    .wrap3 {
        padding: 20px;
        background: #faf9ff;
        margin-bottom: 30px;
        justify-content: space-between;
        border-radius: 10px;
    }
    .tab_wrap {
        display: flex;
        justify-content: space-between;
        div {
            width: 25%;
            padding: 10px 0;
        }
        div:first-child {
            font-weight: bold;
        }
    }
}
</style>
